import { Component, Fragment } from 'react'
import dayjs from 'dayjs'

import { Button, Form, Input, Dialog, DatePicker } from 'antd-mobile'

export class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      pickerShow: false
    }
  }
  UNSAFE_componentWillMount() {
    document.title = '示例'
    console.log('componentWillMount') // 过时 将要废弃
  }
  componentDidMount() {
    console.log('componentDidMount')
  }
  shouldComponentUpdate() {
    console.log('shouldComponentupdate')
    return true
  }
  componentDidUpdate() {
    console.log('componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('componentWillUnmount')
  }

  toPage = () => {
    this.props.history.go(-1)
  }

  onFinish = (values) => {
    Dialog.alert({
      content: JSON.stringify(values),
    })
  }

  render() {
    return (
      <Fragment>
        <Form
          onFinish={this.onFinish}
          footer={
            <Button block type='submit' color='primary'>
              提交
            </Button>
          }
        >
          <Form.Item
            name='user'
            label='账号'
            rules={[{ required: true, message: '姓名不能为空' }]}
          >
            <Input placeholder='请输入账号' />
          </Form.Item>

          <Form.Item
            name='password'
            label='密码'
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input type="password" placeholder='请输入姓名' />
          </Form.Item>

          <Form.Item
            name='birthday'
            label='生日'
            trigger='onConfirm'
            rules={[{ required: true, message: '请选择时间' }]}
            onClick={() => { this.setState({ pickerShow: true }) }}
          >
            <DatePicker
              visible={this.state.pickerShow}
              onClose={() => { this.setState({ pickerShow: false }) }}
            >
              {value =>
                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
              }
            </DatePicker>
          </Form.Item>

        </Form>
        <Button block color='warning' size='large' onClick={this.toPage}>back</Button>
      </Fragment>
    )
  }
}